<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态导入</title>
</head>
<body>
    <button>后盾人</button>
</body>
</html>

<script type="module">
    //使用import必须在顶层静态导入模块，而使用
    //像使用下面的{}中导入是错误的，这是为了分析使用的模块而打包方便
    //所以系统禁止这种行为
    // if(true){
    //     import {site , func} from "./hd.js";
    // }

    
    //动态使用
    //使用import()函数可以动态导入，实现按需加载
    
    
    
    // if(true){
    //     let hd = import("./hd.js").then(module => {
    //         module.func();
    //     });
    // }


    //下面是点击事件发生后按需要加载模块
    // document.querySelector("button").addEventListener("click",()=>{
    //     let hd = import("./hd.js").then(module => {
    //         console.log(module.site);
    //     });
    // });

    //因为返回的是对象，可以使用结构语法
    document.querySelector("button").addEventListener("click",()=>{
        let hd = import("./hd.js").then(({site,func}) => {
            console.log(site,func());
        });
    });




    

</script>